<!DOCTYPE html>
<html>
<head>
	<title>DocumentEditor</title>
	<meta charset="UTF-8">
	<script src="ckeditor.js"></script>
	<style type="text/css">
.editor__editable,
.ck-editor[role='application'] .ck.ck-content,
.ck.editor__editable[role='textbox'],
.ck.ck-editor__editable[role='textbox'],
.ck.editor[role='textbox'] {
	width: 100%;
	background: #fff;
	font-size: 1em;
	line-height: 1.5em;
	min-height:400px;
	/*padding: 0.5em 1.5em;*/
}
.ck.ck-editor__editable {background: #fff;border: 1px solid hsl(0, 0%, 70%);width: 100%;}
.ck.ck-editor {width: 100%;overflow-x: hidden;}
.ck.ck-editor__editable {position: relative;z-index: 10;}
.ck.ck-toolbar{background:#fff;}
body, html {padding: 0;margin: 0;}
body {height: 100%;}
body * {box-sizing: border-box;}
	</style>
</head>
<body>
<div class="editor" id="editor"></div>
<script>
	var javaBridge;
	var toolBarHeight=40;
	var editorCfg={
					toolbar: {
						items: [
							'undo','redo','removeFormat',
							'heading','|',
							'fontSize','fontFamily','|',
							'fontColor','fontBackgroundColor','|',
							'bold','italic','underline','strikethrough','|',
							'alignment','outdent','indent','|',
							'numberedList','bulletedList','|',
							'codeBlock','blockQuote','horizontalLine','|',
							'link','imageInsert','insertTable'
						]
					},
					language: 'zh-cn',
					image: {
						styles: ['alignLeft', 'alignCenter', 'alignRight'],
						resizeOptions: [
							{name: 'resizeImage:original',label: '100%',value: null },
							{name: 'resizeImage:50',label: '20%',value: '20'},
							{name: 'resizeImage:50',label: '50%',value: '50'},
							{name: 'resizeImage:75',label: '75%', value: '75' }
						],
						toolbar: [
							'imageStyle:alignLeft', 'imageStyle:alignCenter', 'imageStyle:alignRight','|',
							'resizeImage','|','imageTextAlternative'
						]
					},
					table: {
						contentToolbar: ['tableColumn','tableRow','mergeTableCells','tableCellProperties','tableProperties']
					},
					codeBlock: {
						languages: [
						{ language: 'plaintext', label: 'Plain text' }, 
						{ language: 'java', label: 'Java'},
						{ language: 'python', label: 'Python'},
						{ language: 'c', label: 'C' },
						{ language: 'cs', label: 'C#' },
						{ language: 'cpp', label: 'C++' },
						{ language: 'css', label: 'CSS' },
						{ language: 'xml', label: 'XML' },
						{ language: 'html', label: 'HTML' },
						{ language: 'javascript', label: 'JavaScript' },
						{ language: 'php', label: 'PHP' },
						{ language: 'ruby', label: 'Ruby' },
						{ language: 'typescript', label: 'TypeScript' },
						{ language: 'golang', label: 'Go' }
						]
					},
					fontFamily:{
						options: [
							'default',
							'微软雅黑,Microsoft YaHei','黑体,SimHei','宋体,SimSum','楷体,KaiTi_GB2312',
							'Arial, Helvetica, sans-serif',
							'Courier New, Courier, monospace',
							'Tahoma, Geneva, sans-serif',
							'Times New Roman, Times, serif',
							'Verdana, Geneva, sans-serif'
						]
					}
				} ;
	
	function createEditor(editorCfg,initHeight,initContent){
		ClassicEditor.create(document.querySelector('#editor'),editorCfg)
			.then( editor => {
				window.editor = editor;
				toolBarHeight=editor.ui.view.toolbar.element.offsetHeight+3;
				//javaBridge.log("initH:"+initHeight);
				if(initHeight&&initHeight>0){
					jsBridge.setHeight(initHeight);
				}
				if(initContent&&""!=initContent){
					jsBridge.setContent(initContent);
				}
				editor.model.document.on('change:data', () => {
					javaBridge.valueChanged();
					//console.log("chang");
				} ); 
			} )
			.catch( error => {
				javaBridge.error(error);
			} );
		}

	var jsBridge={
		init:function(ecfg,initContent){
			//javaBridge.log(ecfg);
				var cfg=ecfg?JSON.parse(ecfg):{};			
				if(cfg.lang&&'zh-cn'!=cfg.lang){
					editorCfg.language=cfg.lang.toLowerCase();
					loadJS("translations/"+editorCfg.language+".js");
					editorCfg.fontFamily.options.splice(1,4);//删除中文字符
				}
				
				if(cfg.toolBarStyle&&cfg.toolBarStyle==0){
					editorCfg.toolbar.items=[
					'undo','redo','removeFormat','|',
					'fontSize','fontColor','|',
					'bold','italic','|',
					'alignment','|',
					'codeBlock','blockQuote']
				}
				
				createEditor(editorCfg,cfg.initHeight,initContent);
			},
			
			setContent: function(content) {
				editor.setData(content);
			},
			insert:function(html){
				var viewFragment = editor.data.processor.toView(html);
        		//对转换的数据进行包裹
        		var modelFragment = editor.data.toModel(viewFragment);
				editor.model.insertContent(modelFragment);
			},
			getContent:function(){
				return editor.getData();
			},
			setHeight:function(h){
				if(h<200){
					return;
				}
				editor.editing.view.change( writer => {
					h=h-toolBarHeight;
					//console.log("setH:"+h);
					var height=h+'px';
					var root=editor.editing.view.document.getRoot();
					writer.setStyle('height', height, root);
				});
			},
		    focus:function() {
		        editor.focus();
		    },
			isReady:function(){
				return editor&&editor.state =='ready'; 
			}
	}

	function getJsBridge(){
		return jsBridge;
	}

	window.onerror=function(message, url, line, column, error){
		javaBridge.error("源:"+url+" 行:"+line+" 列:"+column+". 错误信息:"+error);
		//alert("源:"+url+" 行:"+line+" 列:"+column+". 错误信息:"+error);
	}

	function loadJS(url){
		var script = document.createElement('script');
		script.type = 'text/javascript';
		try {
			script.src = url;
			document.getElementsByTagName('head')[0].appendChild(script);
		}catch(err) {
			
		}
	}
	//jsBridge.init('{"toolBarStyle":0,"initHeight":646}',"hello world");
</script>
</body></html>